<template>
    <div class="FavouriteTreeList">
        <nav-bar
        :goBack="true"
        :title="topTitle"
        :fatherIsTouch="isTouch"
        @cancelClick="cancelClick"
        @checkClick="checkClick"
        :form="'收藏'"
        :currentTreeId="JSON.parse(this.$route.params.item).treeId"
        @onSearch="onSearch"
        @onCancel="onCancel"
        ></nav-bar>

        <!-- 面包屑 -->
        <breadcrumb
        :breadcrumb="breadcrumb"
        :isKnowledgeTree="true"
        :fatherListData="listData"
        @handleFormatClick="handleFormatClick"
        v-if="listData.length > 0 || flage"
        ></breadcrumb>

        <!-- 数据列表 -->
        <div class="personal_outer"> 
            <div class="personal_content">
                <van-list
            v-model="loadMore"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="onLoadMore"
            offset="1"
            >
                <van-checkbox-group v-model="checkArr" ref="listCheck" @change="handleListCheckbox" max="1">
                    <data-list
                    v-for="(item, index) in listData"
                    :key="index"
                    :title="item.type == 1 ? item.cloudFileInfo.name : item.cloudDirectoryInfo.name"
                    :label="item.type == 1 ? item.createTime : item.cloudDirectoryInfo.createTime"
                    :index="index"
                    :isCollection="item.type == 1 ? item.cloudFileInfo.isFavourite : item.cloudDirectoryInfo.isFavourite"
                    :isTouch="isTouch"
                    :DetailsArr="DetailsArr[index]"
                    :menuParameter="menuParameter"
                    v-longtap="() => handleTouch(item, index)"
                    @handleDetailsClick="handleDetailsClick"
                    ></data-list>
                </van-checkbox-group>
            </van-list>
            </div>
        </div>

        <operation-menu Favourite v-show="isTouch" :menuParameter="menuParameter" @handleCancelCollection='handleCancelCollection'></operation-menu>
        
        <transition name="van-slide-right">
        <van-popup class="detail" v-model="DetailShow" v-if="DetailShow" style="width: 100vw; height: 100vh;" :overlay="false">
        <detail :DetailObj="DetailObj" @handleGoBack="(bol) => DetailShow = bol"></detail>
        </van-popup>
        </transition>

    </div>
</template>

<script>
import NavBar from 'components/public/NavBar.vue'
import Breadcrumb from 'components/public/Breadcrumb.vue'
import DataList from "components/public/DataList.vue"
import OperationMenu from "components/public/OperationMenu.vue"
import Detail from 'components/public/Details.vue'

export default {
    name: 'FavouriteTreeList',
    components: {
        NavBar,
        Breadcrumb,
        DataList,
        OperationMenu,
        Detail
    },
    data(){
        return{
            // 通用变量
            // 顶部标题
            topTitle: "",
            // 是否长按标识
            isTouch: false,
            checkArr: [],
            // 个人文档数据列表
            listData: [],
            // 搜索后数据中间变量
            middleware: [],

            // 是否加载面包屑， 用于格式筛选
            flage: false,
            // 将文件id和文件类型传给详情组件
            DetailsArr: [],
            // 将id和treeId传给操作菜单组件，用于操作事件
            menuParameter: {},
            // 长按选中的index下标
            activeIndex: 0,
            // 上拉加载
            loadMore: false,
            finished: false,
            PageIndex: 1,
            PageSize: 10,
            total: 0,

      DetailShow: false,
      DetailObj: {}
        }
    },
    created(){
        this.getknowledgeTreeList(false)
        this.topTitle = JSON.parse(this.$route.params.item).label
        // console.log(JSON.parse(this.$route.params.item))
    },
    methods: {
        handleDetailsClick(obj){
        // console.log(obj)
        this.DetailObj = obj
        this.DetailShow = true
        },
        // 通用事件
        // 列表长按事件
        handleTouch(item, index) {
            console.log("长按了");
            // console.log(item)
            this.activeIndex = index
            this.checkArr.push(index);
            this.isTouch = true;
            // console.log(this.$route)
        },
        // 监听多选按钮点击事件
        handleListCheckbox(arr){
            // console.log(arr)
            // console.log(JSON.parse(this.$route.params.item).treeId)
            this.menuParameter.idArr = arr[0]
            this.menuParameter.treeId = JSON.parse(this.$route.params.item).treeId

            // console.log(this.menuParameter)
        },
        // 子组件传的取消事件
        cancelClick(bol) {
            // console.log(bol)
            this.isTouch = bol;
        },
        //
        checkClick(bol) {
            this.$refs.listCheck.toggleAll(bol);
        },
        // 上拉加载
        onLoadMore(){
            if(this.listData.length < this.total){
                this.PageIndex = this.PageIndex + 1
                this.getknowledgeTreeList(true)
            }else{
                // 数据全部加载完成
                this.finished = true
            }
        
        },
        // 获取列表数据
        getknowledgeTreeList(bol){
            this.$request({
                method: 'get',
                url: '/api/FavouriteTree/GetFavouriteTreeByTreeId',
                params: {
                    Token: sessionStorage.getItem("mobileToken"),
                    treeId: JSON.parse(this.$route.params.item).treeId,
                    Name: '',
                    FileCategory: '',
                    pageSize: this.PageSize,
                    pageIndex: this.PageIndex
                }
            }).then(({data}) => {
                if(data.code == 200){
                    this.total = data.totalCount

                    // this.DetailsArr = this.listData.map(({cloudFileInfo.fileId, type}) => ({fileId: cloudFileInfo.fileId, type}))
                    // 时间转化
                    data.favouriteTreeFileList.forEach(item => {
                        let splitCreateTimeArr = []
                        splitCreateTimeArr = item.createTime.split('T')
                        item.createTime = splitCreateTimeArr[0] + ' ' + splitCreateTimeArr[1]
                    })

                    if(bol){
                        this.listData.push(...data.favouriteTreeFileList)
                    }else{
                        this.listData = data.favouriteTreeFileList
                    }

                    this.DetailsArr = this.listData.map(item => {
                        let fileId
                        if(item.type == 1){
                            fileId = item.cloudFileInfo.fileId
                        }else{
                            fileId = item.cloudDirectoryInfo.directoryId
                        }
                        
                        let obj = {
                            fileId,
                            type: item.type,
                            favouritetreeFileId: item.favouritetreeFileId
                        }
                        return obj
                    })
                    // console.log(this.DetailsArr)
                }else{
                    this.$notify('加载数据失败，请重试。')
                }

                // 加载状态结束
                this.loadMore = false
                console.log(this.listData)
            })
        },
        // 格式筛选事件
        handleFormatClick(arr, bol){
            this.listData = arr
            this.flage = bol
        },
        // 子组件传过来的监听取消收藏事件
        handleCancelCollection(bol){
            if(bol){
                this.listData.splice(this.activeIndex, 1)
            }
            this.isTouch = false
        },
        // 搜索提交后展示的数据
        onSearch(list){
            // console.log(list)
            this.middleware = this.listData
            this.listData = list
        },
        // 搜索取消事件
        onCancel(bol){
            if(bol){
                this.PageIndex = 1
                this.PageSize = 10
                this.getknowledgeTreeList(false)
                this.finished = false
                if(this.isTouch){
                    this.isTouch = false
                }
            }
        }
    },
    computed:{
        breadcrumb(){
            let str = '收藏'+ ',' + JSON.parse(this.$route.params.item || null).label || ''
            let arr = str.split(',')
            return arr
        }
    },
    watch: {
        isTouch(newVal){
            if(newVal){
                // this.topTitle = `已选中${this.checkArr.length}项`
            }else{
                this.topTitle = JSON.parse(this.$route.params.item).label
                // 非长按情况下情况多选款的值
                this.checkArr = []
            }
            // console.log(newVal)
        },
        checkArr(newVal){
            // if(this.isTouch){
            //     this.topTitle = `已选中${this.checkArr.length}项`
            // }
        }
    }
}
</script>

<style lang="less" scoped>
.FavouriteTreeList{
    height: 100%;
}
</style>